/**
 * ScrollableTabView tabbar
 */
export default class TabBar extends Component {

    static propTypes = {
        goToPage: PropTypes.func, // 跳转到对应tab的方法
        activeTab: PropTypes.number, // 当前被选中的tab下标
        tabs: PropTypes.array, // 所有tabs集合
        tabNames: PropTypes.array // 保存Tab名称
    }
    renderTabOption(tab, i) {
        return (
            <TouchableOpacity key={i} onPress={() => this.props.goToPage(i)} style={styles.tab}>
                <View style={{ alignItems: 'center', width: width / 7 }}>
                    <Text style={{ color: this.props.activeTab == i ? themeColor : '#333', fontSize: adapt(14) }}>{this.props.tabNames[i]}</Text>
                </View>
            </TouchableOpacity>
        );
    }

    render() {
        return (
            <View style={styles.tabs}>
                {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
            </View>
        );
    }
}
const styles = StyleSheet.create({
    tabs: {
        flexDirection: 'row',
        height: adapt(25),
        backgroundColor: '#fff',
        borderTopWidth: StyleSheet.hairlineWidth,
        borderColor: '#ccc'
    },
    tab: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
})